<template>
  <div class="checkout-tit">
    <h4 class="tit-txt">
      <span class="success-icon"></span>
      <span class="success-info">订单提交成功，请您及时付款，以便尽快为您发货~~</span>
    </h4>
    <div class="paymark">
      <span> 请您在提交订单4小时之内完成支付，超时订单会自动取消。订单号：<em>145687</em></span>
    </div>
    <van-radio-group v-model="payMethod">
      <van-radio name="weixin"><img src="./images/pay3.jpg" /></van-radio>
      <van-radio name="zhifubao"><img src="./images/pay2.jpg" /></van-radio>
    </van-radio-group>
    <van-dialog
      v-model:show="isShow"
      :title="payMethod === 'weixin' ? '微信支付' : '支付宝支付'"
      message-align="center"
      show-cancel-button
      confirm-button-text="已支付完成"
      cancel-button-text="取消支付"
      :before-close="confirmHandle"
    >
      <qrcode-vue :value="codeUrl" size:300></qrcode-vue><br />
      <p class="lead">应付金额：￥{{ totalAmount }}.00</p>
    </van-dialog>

    <van-button class="payBtn" round type="primary" size="large" @click="handlePay"
      >立即支付</van-button
    >
    <van-button class="cancelBtn" round type="default" size="large" @click="cancelPay"
      >取消</van-button
    >
  </div>
</template>

<script setup lang="ts">

import { reqPayInfo, reqPaySuccess } from '@/api/order'
import QrcodeVue from 'qrcode.vue'
import { ref } from 'vue'
import { showToast } from 'vant'
import { useRoute, useRouter } from 'vue-router'
// 订单id
const orderId = ref<string>()
// 二维码地址
const codeUrl = ref<string>()
// 总价格
const totalAmount = ref<number>()
// 支付方式
const payMethod = ref('weixin')
// 展示弹窗
const isShow = ref(false)

// 路由实例化
const route = useRoute()
const router = useRouter()

// 点击支付按钮
const handlePay = async () => {
  if (payMethod.value === 'zhifubao') return showToast('支付宝暂不支持')
  isShow.value = true
  orderId.value = route.query.orderId as string
  // console.log(route.query)
  totalAmount.value = Number(route.query.totalAmount as string) - 40
  // console.log(totalAmount.value)
  const res = await reqPayInfo(orderId.value)
  if (res.code === 200) {
    codeUrl.value = res.data.codeUrl
  }
}
// 弹窗按钮
const confirmHandle = async (actions: any): Promise<boolean> => {
  // console.log(actions)
  if (actions === 'cancel') return true
  // 点击确定 发送请求  确认是否支付完成
  try {
    const res = await reqPaySuccess(orderId.value as string)
    // code为200 支付成功
    console.log(res)
    if (res.code === 200) {
      // 关闭 弹窗   关闭定时器 跳转到支付成功页面
      router.push('/cart')
    } else {
      // 未支付 点击确定按钮 code为205  关闭弹窗   关闭定时器  提示未支付
      showToast('您还没有支付')
    }
  } catch (error) {
    showToast('支付失败，请重新支付')
  }
  return true
}

const cancelPay = () => {
  router.back()
}
</script>

<script lang="ts">
export default {
  name: 'MyPay'
}
</script>

<style scoped>
.checkout-tit {
  position: relative;
  height: 647px;
  padding: 10px;

  .tit-txt {
    font-size: 14px;
    line-height: 21px;

    .success-icon {
      width: 30px;
      height: 30px;
      display: inline-block;
      background: url(./images/icon.png) no-repeat 0 0;
    }

    .success-info {
      line-height: 30px;
      vertical-align: top;
    }
  }

  .paymark {
    overflow: hidden;
    line-height: 26px;
    text-indent: 38px;
  }
}
:deep(.van-dialog__content) {
  height: 150px;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
}
:deep(.van-dialog) {
  height: 250px;
}
:deep(.van-dialog__footer) {
  height: 50px;
}

.payBtn {
  position: absolute;
  left: 0;
  bottom: 50px;
}
.cancelBtn {
  position: absolute;
  left: 0;
  bottom: 0;
}
</style>
